import React, { useState, useEffect } from "react";
import cx from "classnames";
import { CloseIcon as CloseIconSvg } from "../Svg";
import "./style/index";

export interface Props {
  isShowBg?: boolean;
}
function CloseIcon(props: Props) {
  const { isShowBg } = props;
  const [fillColor, setFillColor] = useState("");

  useEffect(() => {
    setFillColor(isShowBg ? "#fff" : "#abadb3");
  }, [isShowBg]);

  const onMouseOver = () => {
    !isShowBg && setFillColor("#262626");
  };
  const onMouseOut = () => {
    !isShowBg && setFillColor("#abadb3");
  };

  return (
    <div className={cx("closeIcon", { background: isShowBg })} onMouseOver={onMouseOver} onMouseOut={onMouseOut}>
      <CloseIconSvg width={6} height={6} fillColor={fillColor} />
    </div>
  );
}

export default CloseIcon;
